<script>
import Layout from "../../layouts/main";
import PageHeader from "@/components/page-header";
import Stat from "./widget";
import RecentActivity from "./recent-activity";
import Transaction from "./transaction";
import businessTransaction from "./businessTransaction";
import weMediaTransaction from "./weMediaTransaction";
/**
 * Dashboard component
 */
export default {
  components: {
    Layout,
    PageHeader,
    Stat,
    RecentActivity,
    Transaction,
    businessTransaction,
    weMediaTransaction,
  },
  data() {
    return {
      title: "数据采集",
      // 信源筛选
      sitetype: [
        {
          name: "全部信源",
          index: 1,
        },
        {
          name: " 资讯信源",
          index: 2,
        },
        {
          name: "招标信源",
          index: 3,
        },
        {
          name: "政策信源",
          index: 4,
        },
        {
          name: "工商信源",
          index: 5,
        },
        {
          name: "证券信源",
          index: 6,
        },
        {
          name: "自媒体号",
          index: 7,
        },
        {
          name: "短视频信源",
          index: 8,
        },
      ],
      siteChange: 1,
    };
  },
  methods: {
    //站点筛选
    allSites(item) {
      this.siteChange = item.index;
    },
  },
  created () {
    console.log(this.$route.query.id);
  }
};
</script>

<template>
  <Layout>
    <PageHeader :title="title" items="" />
    <div>
      <div class="row">
        <div class="col-xl-8">
          <Stat />
        </div>
        <div class="col-xl-4">
          <RecentActivity />
        </div>
      </div>
      <div class="col-lg-12" style="padding: 0">
        <div class="card" style="margin-bottom: 0">
          <div class="card-body">
            <div class="all-products">采集站点管理</div>
            <div class="states-type">
              <span class="type-title">信源类型:</span>
              <button
                type="button"
                class="btn btn-light rounded-pill btn-sm states-type-item"
                :class="{ isActive: siteChange == item.index }"
                v-for="item in sitetype"
                :key="item.index"
                @click="allSites(item)"
              >
                {{ item.name }}
              </button>
            </div>
          </div>
        </div>
        <businessTransaction v-if="siteChange==5" />
        <weMediaTransaction v-else-if="siteChange==7" />
        <Transaction v-else />
      </div>
    </div>
  </Layout>
</template>
<style lang="scss" scoped>
.isActive {
  color: #fff;
  background-color: #5664d2;
}
.all-products {
  font-size: 15px;
  font-weight: bold;
}
.states-type {
  margin-top: 20px;
  .type-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-type-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
.states-time {
  margin-top: 20px;
  .ad {
    float: right;
  }
  .time-title {
    display: inline-block;
    color: #74788d;
    padding-right: 10px;
  }
  .states-time-item {
    font-size: 12px;
    margin-left: 10px;
    padding-left: 8px;
    padding-right: 8px;
    min-width: 70px;
    &:hover {
      cursor: pointer;
    }
  }
}
</style>